<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>圆形导航</title>
		<link rel="stylesheet" type="text/css" href="index.css"/>
		<script type="text/javascript">
			window.onload=function(){
				var nav=function(){
					navThis=this;//为了避免this混淆，先把nav函数的this赋值给一个变量
					var lis=document.getElementsByTagName("li");//抓取所有li
					var linum=lis.length;
					var rad=360/linum*(Math.PI/180);//算出相邻两个圆圆心与中心的夹角
					var center=document.getElementById("center");
					navThis.r=200;//设置半径
					navThis.run=function(){
						var flag=true;//设置此参数是点击闭合的开关
						center.onclick=function(){//点击中心按钮
							if(flag){//奇数次点击的时候参数为真
								for(var i=0;i<linum;i++){
									lis[i].style.transition='all 1s '+i*200+'ms';//设置过度动画持续时间和延迟时间
									lis[i].style.transform='rotateY(1080deg)';//设置旋转
									lis[i].style.left=Math.cos(rad*i)*navThis.r+center.offsetLeft+'px';
									lis[i].style.top=Math.sin(rad*i)*navThis.r+center.offsetTop+'px';
								}
								flag=false;//点击之后改变参数的值
							}else{
								for(var i=0;i<linum;i++){
									lis[i].style.transition='all 1s '+i*200+'ms';//设置过度动画持续时间和延迟时间
									lis[i].style.transform='rotateY(0deg)';//设置旋转，转回来
									lis[i].style.left=center.offsetLeft+'px';//把圆原先的位置赋回去
									lis[i].style.top=center.offsetTop+'px';
								}
								flag=true;//偶数次点击之后再次改变参数的值
							}
						}
					}
				}
				var obj=new nav();
				obj.r=200;
				obj.run();
			}
		</script>
	</head>
	<body>
		<div id="box">
			<div id="center">
				skills
			</div>
			<ul>
				<li>html</li>
				<li>css</li>
				<li>js</li>
				<li>JQ</li>
				<li>微信</li>
				<li>Linux</li>
				<li>Apache</li>
				<li>Nginx</li>
				<li>MySQL</li>
				<li>php</li>
			</ul>
		</div>
	</body>
</html>
